<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>浏览器精确定位</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,body,#container{
            height:100%;
        }
        .info{
            width:26rem;
        }
          .area {
            /* position: absolute; */
            z-index: 1000!important;
            transform: translateX(-40%)
        }

        .area.hover,.area.selected {
            z-index: 2000!important
        }

        .area_content {
            position: relative;
            border-radius: 2%;
            background: linear-gradient(#1ebd8d 50%,#19b380);
            box-shadow: 0 2px 10px rgba(71,75,78,.3)
        }

        .area.selected .area_content {
            background: linear-gradient(#ff8e38 50%,#fc7d32)!important
        }

        .area.hover .area_content {
            background: #078058
        }

        .area.clicked .area_content {
            background: #7dd1b5
        }

        .area_arrow_ico {
            margin-left: calc(50% - 5px);
            display: block;
            width: 20px;
            height: 10px;
            background: url(//pages.anjukestatic.com/fe/esf/img/9822f782/triangle@2x.png) 50% no-repeat;
            background-position: -16px -18px;
            transform: scale(.5);
            transform-origin: left top
        }

        .area.hover .area_arrow_ico {
            background-position: -56px -18px
        }

        .area.clicked .area_arrow_ico {
            background-position: -138px -18px
        }

        .area.selected .area_arrow_ico {
            background-position: -98px -18px
        }

        .area_name,.area_price {
            position: relative;
            font-family: PingFangSC-Medium,PingFang SC,Microsoft YaHei,Arial,"\5B8B\4F53",Helvetica,sans-serif;
            color: #fff;
            text-align: center;
            padding: 8px 10px;
            font-size: 14px;
            line-height: 14px;
            z-index: 9;
            zoom:1}

        .area_name {
            max-width: 110px;
            min-width: 42px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-bottom: 2px
        }

        .area_price {
            padding-top: 2px
        }
        #container {
      width: 100%;
      height: 100%;
    }

    #panel {
      position: fixed;
      background-color: white;
      max-height: 90%;
      overflow-y: auto;
      top: 10px;
      right: 10px;
      width: 280px;
    }

    #panel .amap-call {
      background-color: #009cf9;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    #panel .amap-lib-driving {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      overflow: hidden;
    }
    </style>
<body>
<div id='container'></div>
<!--<div class="info">-->
<!--    <h4 id='status'></h4><hr>-->
<!--    <p id='result'></p><hr>-->
<!--    <p >由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p>-->
<!--</div>-->
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'b76ea6ed02f8cbb5b4e21af48863cff1',
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=d21f53ab80d60103ba880e90e266e03a"></script>
<script type="text/javascript">

  const map = new AMap.Map('container', {
    resizeEnable: true, //是否监控地图容器尺寸变化
    zoom:20, //初始化地图层级
     center: [116.251914,40.116704] //初始化地图中心点
  });

  //构造路线导航类
    var driving = new AMap.Driving({
      map: map,
      panel: "panel"
    });

  AMap.plugin('AMap.Geolocation', function() {
      var geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,//是否使用高精度定位，默认:true
          timeout: 10000,          //超过10秒后停止定位，默认：5s
          buttonPosition:'RB',    //定位按钮的停靠位置
          buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
          zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
          needAddress: true,

      });
      map.addControl(geolocation);
      geolocation.getCurrentPosition(function(status,result){
      console.log(    JSON.stringify(result))
          if(status=='complete'){
<!--              onComplete(result)-->
            // 获取定位结果
            var position = result.position;
            var formattedAddress = result.formattedAddress;
            console.log(formattedAddress);

            // 创建马克标记
            let marker = new AMap.Marker({
                map: map,
                position: position,
                content: `
                <div class="area area_787" style="z-index: -7982268; user-select: none; left: 126px; top: 264px;">
                <div class="area_content"><div class="area_name">${formattedAddress}</div>
                <div class="area_price">4.8万</div></div>
                <div class="area_arrow_ico" style="left: 10px;"></div></div>`
            });
            markers.push(marker);

          }else{
              onError(result)
          }
      });
  });

<!--    //解析定位结果-->
<!--  function onComplete(data) {-->
<!--      document.getElementById('status').innerHTML='定位成功'-->
<!--      var str = [];-->
<!--      str.push('定位结果：' + data.position);-->
<!--      str.push('定位类别：' + data.location_type);-->
<!--      /*str.push('详细位置：' + data.formattedAddress);*/-->
<!--      var position_de = data.formattedAddress;-->
<!--      position_ie = data.formattedAddress;-->
<!--      str.push('位置：' + position_de);-->
<!--      str.push('详细信息：' + data.message);-->
<!--      if(data.accuracy){-->
<!--          str.push('精度：' + data.accuracy + ' 米');-->
<!--      }//如为IP精确定位结果则没有精度信息-->
<!--      str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));-->
<!--      document.getElementById('result').innerHTML = str.join('<br>');-->
<!--  }-->
<!--  //解析定位错误信息-->
<!--  function onError(data) {-->
<!--      document.getElementById('status').innerHTML='定位失败'-->
<!--      document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;-->
<!--  }-->

</script>
</body>
</html>